<script setup>
import { reactive, ref, onMounted } from 'vue'
import { randomWord } from '@/core/utils/Common'
import { PasswordValidator, MobileNumberValidator , EmailValidator} from '@/core/utils/Validator'
import useFormEvent from '@/core/hooks/useFormEvent'
import userApi from '@/api/system/UserApi'
import roleApi from '@/api/system/RoleApi'

const formRef = ref()  // 表单ID
const state = reactive({
  visible: false, //
  loading: false, // 加载开关
  roleOptions: [], // 可用角色选项
  roleSelected: [] // 选中的角色
})
// 表单结构
const original = {
  id: '',
  userName: '',
  passwd: '',
  salt: '',
  petName: '',
  email: '',
  mobile: '',
  roles: [],
  notes: ''
}
// 表单数据
const formState = reactive({})
// 随机生成随机盐
const handleRoundSaltClick = () => {
  formState.salt = randomWord(24)
}
// 解
const handleRoleChange = (value)=> {
  formState.roles = []
  value.forEach(it=>{
    let option ={label: it,value: it }
    formState.roles.push(option)
  })
  
}
// 表单 处理
const { 
  onCancel, onFinish, InitializeData 
} = useFormEvent({state: state, remoteApi: userApi, formState: formState, original: original, formRef: formRef})

// 重写初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    // console.info('重写初始化')
    state.roleSelected = []
    if(formState.roles?.length >0){
      formState.roles?.forEach(it=>{
        state.roleSelected.push(it.value)
      })
    }
  })
}
//向父组件暴露方法和属性
defineExpose({ 'InitializeData': initializationData})
// 页面加载
onMounted(() => {
  roleApi.getRoleOptions().then(res => {
    state.roleOptions = res.data
  })
})
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`用户信息`"
    placement="right"
    :width="'50%'"
  >
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="用户名" name="userName" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入用户名!' }]"
              >
                <a-input
                  v-model:value="formState.userName" show-count :minlength="5" :maxlength="20" allow-clear
                  :disabled="formState.id!=''" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="昵称" name="petName" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入昵称!' }]">
                <a-input v-model:value="formState.petName" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col v-if="formState.id==''" :span="24">
              <a-form-item
                label="密码" name="passwd" :label-col="{span:3}"
                :rules="[
                  { required: true, message: '请输入密码!' },
                  { validator: PasswordValidator }]"
              >
                <a-input v-model:value="formState.passwd" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col v-if="formState.id==''" :span="24">
              <a-form-item
                label="密码盐" name="salt" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入密码盐'}]"
              >
                <a-input v-model:value="formState.salt" placeholder="请点右边生成" disabled allow-clear>
                  <template #addonAfter>
                    <a-tooltip color="cyan" title="随机生成盐">
                      <sync-outlined @click="handleRoundSaltClick" />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="角色" name="roles" :label-col="{span:3}"
                :rules="[ { required: true, message: '请选择角色' } ]"
              >
                <a-select
                  v-model:value="state.roleSelected"
                  mode="multiple"
                  style="width: 100%"
                  placeholder="请选择用户角色"
                  allow-clear
                  :options="state.roleOptions"
                  @change="handleRoleChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="手机号" name="mobile" :label-col="{span:3}"
                :rules="[
                  { required: true, message: '请输入手机号!' },
                  { validator: MobileNumberValidator }]"
              >
                <a-input v-model:value="formState.mobile" show-count :maxlength="11" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="邮箱" name="email" :label-col="{span:3}"
                :rules="[{ validator: EmailValidator }]">
                <a-input v-model:value="formState.email" show-count :maxlength="100" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}"
              >
                <a-textarea v-model:value="formState.notes" show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                  <a-input v-model:value="formState.id" type="hidden" />
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
  </a-drawer>
</template>